<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>触发mutations的第二种方法</title>
  <link rel="stylesheet" href="../css/base.css">
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
  <script src="../js/vuex.js"></script>
</head>
</head>
<!-- 
  1.从vuex中按需导入mapMutations函数
    import {mapMutations} from "vuex"
  2.通过导入的mapMutations函数,将需要的mutations函数，映射为当前的methods的方法

  注意mapMutations中不能有异步的方法(setTimeout等)
 -->

<body>
  <div id="app">
    <h1>我是是count {{count}}</h1>
    <h1>我是是step {{step}}</h1>
    <h1>我是是com {{com}}</h1>
    <input type="button" value="点击count的了" @click="handlecount">
    <input type="button" value="点击step的了" @click="handlestep">
    <input type="button" value="点击com的了" @click="handlecom(8)">
  </div>
</body>
<script>
  "use strict";
  const store = new Vuex.Store({
    state: {
      count: 0,
      step: 10,
      com: 7
    },
    mutations: {
      addN(state) {
        state.count++;
      },
      hands(state) {
        state.step += state.com;
      },
      coms(state, steps) {
        state.com += steps;
      }
    }
  });
  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {
      ...Vuex.mapMutations(["addN", "hands", "coms"]),
      handlecount() {
        this.addN();
      },
      handlestep() {
        this.hands();
      },
      handlecom(steps) {
        this.coms(steps);
      }
    },
    computed: {
      ...Vuex.mapState(["count", "step", "com"])
    },
    store
  });
</script>

</html>